<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link th:href="@{/erp/assets/css/bootstrap.min.css}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/erp/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/erp/assets/css/ace.min.css}"/>
    <link rel="stylesheet" th:href="@{/erp/assets/css/font-awesome.min.css}"/>
    <link rel="stylesheet" th:href="@{/erp/Widget/zTree/css/zTreeStyle/zTreeStyle.css}" type="text/css">
    <script th:src="@{/erp/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/erp/assets/js/bootstrap.min.js}"></script>
    <script th:src="@{/erp/assets/js/typeahead-bs2.min.js}"></script>
    <!-- page specific plugin scripts -->
    <script th:src="@{/erp/assets/js/jquery.dataTables.min.js}"></script>
    <script th:src="@{/erp/assets/js/jquery.dataTables.bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/erp/js/H-ui.js}"></script>
    <script type="text/javascript" th:src="@{/erp/js/H-ui.admin.js}"></script>
    <script th:src="@{/erp/assets/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/erp/assets/laydate/laydate.js}" type="text/javascript"></script>
    <script type="text/javascript" th:src="@{/erp/Widget/zTree/js/jquery.ztree.all-3.5.min.js}"></script>
    <script th:src="@{/erp/js/lrtk.js}" type="text/javascript"></script>
    <title>打码任务分配</title>

</head>

<body>

<div class="margin clearfix">
    <div class="stystems_style">
        <div class="tabbable">
            <div class="page-content clearfix">
                <div id="Member_Ratings">
                    <div class="d_Confirm_Order_style">
                        <ul class="nav nav-tabs" id="myTab">
                            <li class="active">
                                <a data-toggle="tab" href="#home"><i class="green fa fa-home bigger-110"></i>打码任务分配</a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content">

                        <div id="home" class="tab-pane active">
                            <!--隐藏刷新表格按钮-->
                            <input type="hidden" id="#shuaxin" />
                            <!---->
                            <div class="border clearfix">
                                <span class="l_f">
                                <a href="javascript:;" onclick="member_zd()" class="btn btn-info">自动分配</a>
                                <a href="javascript:;" id="member_add" class="btn btn-success">手动分配</a>
                                </span>
                            </div>
                            <table class="table table-striped table-bordered table-hover" id="sample-table">
                                <thead>
                                <tr>
                                    <td width="50"><label><input type="checkbox" id="btnAllChk" class="ace"><span
                                            class="lbl"></span></label></td>
                                    <th width="110">订单编号</th>
                                    <th width="110">激光码</th>
                                    <th width="110">状态</th>
                                    <th width="100">打印机</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    jQuery(function ($) {
        var table = $('#sample-table').DataTable({
            "autoWidth": false,//当重复刷新表格时，我的页面会出现变形的，现象，加了这个就好了
            searching: false,
            serverSide: true,   //开始服务器分页
            destroy:true,
            ajax: {
                url: '/laser/fpdyj_page?orderNo='+'[[${COrderNo}]]',
                type: 'post',
                dataSrc: 'data',
                data: function (message) {

                    var data = $('form').serialize();   //获取查询条件

                    //获取分页信息
                    var pages = {
                        start: message.start,

                        length: message.length,
                    };
                    /*<![CDATA[*/
                    data = data + '&' + $.param(pages);
                    return data;

                }
            },
            columnDefs: [{"defaultContent": "",
                "targets": "_all"}],
            columns: [
                {
                    "data": "id", "createdCell": function (td, cellData, rowData, row, col) {
                        /*<![CDATA[*/
                        if(rowData.olStatus=='待打印'){
                            $(td).empty().append('<label><input type="checkbox" value="' + rowData.id + '" id="ID" name="yy"  class="ace ace_cek cka"><span\n' +
                                '                                            class="lbl"></span></label>');
                        }else if(rowData.olStatus=='已打印'){
                            $(td).empty().append('<label><input type="checkbox" disabled="disabled" value="' + rowData.id + '" id="ID" name="yy"  class="ace"><span\n' +
                                '                                            class="lbl"></span></label>');
                        }

                    }
                },
                {"data": "orderNo"},
                {"data": "olCode"},
                {"data": "olStatus"},
                {"data": "printer"},
            ]
        });

        $("#shuaxin").on("click",function () {
            table.fnUpdate();
        });

        // $('table th input:checkbox').on('click', function () {
        //     var that = this;
        //     $(this).closest('table').find('tr > td:first-child input:checkbox')
        //         .each(function () {
        //             this.checked = that.checked;
        //             $(this).closest('tr').toggleClass('selected');
        //         });
        //
        // });


        $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('table')
            var off1 = $parent.offset();
            var w1 = $parent.width();

            var off2 = $source.offset();
            var w2 = $source.width();

            if (parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2)) return 'right';
            return 'left';
        }


    /*打印机-手动分配*/
    $('#member_add').on('click', function () {
        var ace_che = $('.ace_cek').is(':checked');
        if (!ace_che) {
            layer.open({
                title: '提示',
                content: '请选择需要手动分配的订单编号！'
            })
            return;
        }

        var abc = [];
        //定义一个空数组
        $("input[name='yy']:checked").each(function (i) {    //把所有被选中的复选框的值存入数组
            abc[i] = $(this).val();
        });
        var orderNo = table.row(0).data().orderNo;
        layer.open({
            type: 2,
            title: '手动分配打印机',
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area: ['800px', '500px'],
            content: "/laser/sd_page?ids="+abc+"&orderNo="+orderNo,
            end: function(){
                $("#shuaxin").click();
                window.location.href = "/production/laser/sc_jgmPage";
            }
        });
    });
    /*打印机-编辑*/
    $(function () {


        $("#btnAllChk").change(function(){//判断全选框的改变
            console.log("change");
            var flage =$(this).is(":checked");//全选选中为true，否则为false

            $(".ace_cek").each(function(){

                $(this).prop("checked",flage);

            })

        })


    })

    })

    /*自动分配跳转*/
    function member_zd() {
        console.log(123);
        var ace_che = $('.ace_cek').is(':checked');
        if (!ace_che) {
            layer.open({
                title: '提示',
                content: '请选择需要自动分配的订单编号！'
            })
            return;
        }

        var Nos = '';
        //定义一个空数组
        $("input[name='yy']:checked").each(function (i) {    //把所有被选中的复选框的值存入数组
            Nos += $(this).val()+',';
        });

        window.location.href="/laser/zdfp?Nos="+Nos;

    }
    /*end自动分配跳转*/
</script>
